<template>
  <div style="padding: 8px;min-width: 270px;" v-if="Object.keys(state).length > 0">
    <div class="filter-dropdown" v-if="state[column.key]">
      <div style="margin-bottom: 2px" v-if="column.formType === 'select'">
        <div class="reset-top">
          <a-input :style="{ width: column.otherFormType === 'sort' ? '' : '100%' }"
            v-if="column.otherFormType === 'search' || column.otherFormType === 'sort'" class="reset-input"
            ref="searchInput" :placeholder="`搜索 ${column.title}`" :value="state[column.key].inputValue"
            @change="inputChange">
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input>
          <div class="flex" v-if="column.otherFormType === 'sort'" style="cursor: pointer">
          </div>
        </div>
        <div>
          <Checkbox style="margin-bottom: 8px;" v-model:checked="state[column.key].checkAll"
            :indeterminate="state[column.key].indeterminate" @change="funEmit('onCheckAllChange')">
            全选
          </Checkbox>
          <div style="">
            <CheckboxGroup class='boxGroup' v-model:value="state[column.key].checkedList"
              :options="state[column.key].options" @change="funEmit('onCheckChange')" />
          </div>
        </div>
      </div>
      <div v-else-if="column.formType === 'time'">
        <!-- <div class="flex" style="margin-bottom: 16px">
            <span @click="sortChange(column,'asc',confirm)">
              <ArrowUpOutlined />正序
            </span>
          <span @click="sortChange(column,'desc',confirm)">
              <ArrowDownOutlined />倒序
            </span>
        </div> -->
        <a-range-picker value-format="YYYY-MM-DD" v-model:value="state[column.key].inputValue"
          :placeholder="['开始时间', '结束时间']" style="width: 100%" />
        <!-- <a-date-picker
          date-format="YYYY年M月D日"
          time-format="HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          v-model:value="state[column.key].inputValue"
          :placeholder="column.title"
          style="width: 100%"
        ></a-date-picker> -->
      </div>
      <div v-else-if="column.formType === 'timeRange'">
        <a-range-picker value-format="YYYY-MM-DD HH:mm:ss" v-model:value="state[column.key].timeRange"
          :placeholder="['开始时间', '结束时间']" style="width: 100%"></a-range-picker>
      </div>
      <div v-else-if="column.formType === 'input'">
        <a-input class="reset-input" ref="searchInput" :placeholder="`搜索 ${column.title}`" @blur='handleBlur(column)'
          @focus='handleFocus(column)' v-model:value="state[column.key].inputValue" />
        <div v-show="column.showHistory" v-if="column.history" class="history-wrap">
          <div v-show="column.historyList?.length > 0" class="history-wrap-item"
            @click="state[column.key].inputValue = v" v-for="v in column.historyList">
            <span>{{ v }} </span>
            <i class="iconfont icon-guanbi" @click.stop.prevent="removeHistory(column, v)"></i>
          </div>
          <div style="color:#bbb ;" v-show="column.historyList?.length === 0">
            暂无数据
          </div>
        </div>

      </div>
      <div v-else-if="column.formType === 'cascader'">
        <a-cascader v-model:value="state[column.key].checkedList" :options="state[column.key].options"
          :placeholder="`选择${column.title}`" showCheckedStrategy="Cascader.SHOW_CHILD" multiple
          @change="funEmit('onCheckChange')" />
      </div>
    </div>
    <div style="display: flex;justify-content: space-between;margin-top: 10px;">
      <a-button type="text" style="color: #209EE4" size="small" @click="funEmit('handleReset')">
        {{ textFun(column.formType) }}
      </a-button>
      <a-button type="primary" size="small" @click="handleSearch(column)">
        确定
      </a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Checkbox, CheckboxGroup } from 'ant-design-vue';
import { ref } from "vue"
const props= defineProps({
  state: {
    type: Object,
    required: true
  },
  column: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['handleSearch', 'handleReset', 'handleInputChange', 'onCheckAllChange', 'onCheckChange'])

// 抛出方法
function funEmit(name) {
  emit(name)
}

// 输入框输入
function inputChange(e) {
  emit('handleInputChange', e.target.value)
}

// 文案
function textFun(type) {
  return ['select', 'time'].includes(type) ? '清除所选内容' : '清除输入内容'
}
const handleSearch = (column) => {
  column.showHistory = false
  focusFalg.value = false
  if ( column.history &&props.state[column.key].inputValue) {
    column.historyList.unshift(props.state[column.key].inputValue);
    localStorage.setItem(column.key, JSON.stringify([...new Set(column.historyList)].slice(0, 5)))
  }
  funEmit('handleSearch');
}

const focusFalg = ref<boolean>(false)
const handleBlur = (item) => {
  setTimeout(() => {
    if (!focusFalg.value) {
      item.showHistory = false;
    }
  }, 100);
}
const handleFocus = (item) => {
  focusFalg.value = false
  item.showHistory = true;
  const list = JSON.parse(localStorage.getItem(item.key) || '[]')
  item.historyList = list.slice(0, 5)
}

const removeHistory = (item, v) => {
  focusFalg.value = true
  item.historyList = item.historyList.filter(el => el !== v);
  console.log(item.historyList, 'item.historyList');
  localStorage.setItem(item.key, JSON.stringify(item.historyList))
}
</script>

<style lang="less" scoped>
.filter-dropdown {
  padding: 8px;
  min-height: 50px;
  max-height: 300px;
  overflow-x: auto;
  box-sizing: border-box;

  .reset-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    .reset-input {
      height: 32px;
      width: 140px;
    }
  }
}

:deep(.boxGroup) {
  display: flex;
  flex-direction: column;
}

.history-wrap {
  background: #FFFFFF;
  margin-top: 4px;
  box-shadow: 0px 0px 4px 0px rgba(4, 50, 75, 0.3);
  border-radius: 4px 4px 4px 4px;
  padding: 5px 17px;
  box-sizing: border-box;

  .history-wrap-item {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
    display: flex;
    justify-content: space-between;

    .history-wrap-close {
      display: block;
    }

    &:hover {
      color: #209ee4;

      .history-wrap-close {
        display: block;
      }
    }
  }
}
</style>